<template>
  <div>
    <!-- 绑定手机号 -->
    <div class="contain">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        label-position="top"
        class="el_form"
        :rules="rules"
      >
        <el-form-item label="手机号" prop="sjh">
          <el-input v-model="form.sjh">
            <template slot="prepend">+87</template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="验证码" prop="code" style="margin-bottom:43px;">
          <el-input v-model="form.code">
            <el-button slot="append" class="getCodeBtn" @click="getCode">{{
              code
            }}</el-button>
          </el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="bindPhone">立即登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { isMobile } from "@/utils/vaild.js";
export default {
  data() {
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      if (!isMobile(value)) {
        return callback(new Error("手机号格式不正确"));
      }
      return callback();
    };
    return {
      code: "获取验证码",
      title: this.$store.state.programName,
      form: {
        sjh: "", //手机号
        code: "" //验证码
      },
      rules: {
        sjh: [{ required: true, validator: checkPhone, trigger: "blur" }],
        code: [{ required: true, message: "请填写验证码", trigger: "blur" }]
      }
    };
  },
  methods: {
    bindPhone() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$router.push({ path: "/index" });
          // const formData = new FormData();
          // formData.set('sjh',this.form.sjh)
          // this.$http.post(this.$baseUrl.mobileLogin,formData).then((res)=>{
          //   if(res.data[0].pop == '0'){
          //     this.$message.success(res.data[0].log)
          //     this.$router.push({path:'/index'})
          //   }else{
          //     this.$message.error(res.data[0].log)
          //   }
          // }).catch((err)=>{
          //   console.log(err)
          // })
        }
      });
    },
    getCode() {
      this.$refs.form.validateField("sjh", err => {
        if (err === "") {
          // this.$http.p
        }
      });
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.contain {
  .top-contain {
    margin-bottom: 71px;
    .title {
      font-size: 32px;
      color: $font-color;
      font-weight: 600;
      margin-bottom: 7px;
    }
    .bindPhone {
      font-size: 16px;
      color: $nomal-color;
    }
  }
  .getCodeBtn {
    color: $base-font-color;
  }
  .el_form.el-form--label-top {
    /deep/ .el-form-item__label {
      padding: 0;
    }
  }
  /deep/ .el-input-group__append,
  /deep/ .el-input-group__prepend {
    background-color: transparent;
  }
}
</style>
